<template>
  <el-card :body-style="{padding:0}">
    <div class="my-sx">
      <div class="right">
        <!-- 聊天窗口 -->
        <div class="talk" ref="talk">
          <!-- 返回的userName 为对方的userName -->
          <msg-box
            v-for="(item,index) in talkList"
            :key="index"
            :isyou="item.sid!=item.ownerId"
            :content="item.content"
            :userName="item.sid!=item.ownerId?item.userName:user.userName"
            :userId="item.sid!=item.ownerId?item.guestId:user.id"
            :photo="item.sid!=item.ownerId?item.photo:user.photo"
          ></msg-box>
        </div>
        <!-- 文本输入框 -->
        <div class="sendText" v-loading="loading">
          <!-- <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="255"
          show-word-limit
        ></el-input>
          <el-button type="primary">发送</el-button>-->

          <comment-post btn-text="发送私信" :submit="sendText" v-model="content"></comment-post>
        </div>
      </div>
      <div class="left">
        <div
          class="user-item"
          @click="getUserTalkList(item.guestId)"
          :class="{'my-active':item.guestId==guestId}"
          v-for="(item,index) in letterUserList"
          :key="index"
        > 
          <!-- 头像 -->
          <div class="photo">
            <my-photo :userName="item.userName" :userId="item.guestId" line-height="30px"></my-photo>
          </div>
          <div class="userName">{{item.userName}}</div>
          <div class="num" v-if="item.unread>0" >{{item.unread}}</div>
          <div class="del" @click="delTalk(item.guestId)">删除</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import msgBox from "../../components/msg-box.vue";

export default {
  name: "my-sx",
  data: function() {
    return {
      user: {},
      textarea: "",
      letterUserList: [],
      talkList: [],
      guestId: null,
      content: "",
      loading: false
    };
  },
  methods: {
    //自动滚动到底部
    toBottom() {
      var talk = this.$refs["talk"];
      talk.scrollTop = talk.scrollHeight;
    },
    //发送消息
    sendText() {
      if (this.content.length <= 0) {
        this.$message.error("发送内容不能为空！");
        return;
      }
      this.loading = true;
      this.axios
        .post("letter/send", {
          sid: this.$store.state.user.id,
          rid: this.guestId,
          content: this.content
        })
        .then(res => {
          if (res.data.success) {
            this.$message.success("发送成功");
            this.content = "";
            this.loading = false;
            this.getUserTalkList(this.guestId);
          }
        });
    },
    //获取私信用户列表
    getLetterUserList() {
      this.axios
        .post("letter/list", {
          id: this.$store.state.user.id
        })
        .then(res => {
          this.letterUserList = res.data.list;
          if (this.letterUserList.length > 0)
            this.getUserTalkList(this.guestId==null?this.letterUserList[0].guestId:this.guestId);
        });
    },
    //获取用户聊天信息列表
    getUserTalkList(id) {
      this.axios
        .post("letter/talkList", {
          gid: id,
          id: this.$store.state.user.id
        })
        .then(res => {
          this.talkList = res.data.list;
          this.guestId = id;
        });
    },
    //删除聊天
    delTalk(id) {
      this.$confirm("此操作将永久删除聊天记录，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios.post("letter/del", { id: this.$store.state.user.id,gid:id }).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getLetterUserList()
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  components: {
    msgBox
  },
  created: function() {
    console.log(this.$refs["talk"]);
    this.user = this.$store.state.user;
    console.log(this.user);
  },
  mounted: function() {
    this.toBottom();
    this.getLetterUserList();
  },
  computed: {
    /* user:function(){
          return this.$store.state.user
      }  */
  }
};
</script>

<style lang="scss" scoped>
.my-sx {
  display: flex;
  // border-radius: 10px;
  overflow: hidden;
  .right {
    //background-color: rgb(235, 235, 222);
    width: 70%;
    height: 700px;
    border-right: 1px solid #dcdfe6;
  }
  .left {
    width: 30%;
    height: 700px;
    //background-color: #faf8f8;
    padding-top: 10xp;
    overflow-y: auto;
    overflow: hidden;
    &:hover {
      overflow: auto;
    }
    .user-item {
      display: flex;
      padding: 10px 0 10px 10px;
      border-bottom: 1px solid #dcdfe6;
      position: relative;
      cursor: pointer;
      align-items: center;
      &:hover {
        background-color: #dcdfe6;
      }
      .photo {
        height: 30px;
        width: 30px;
        border-radius: 5px;
        overflow: hidden;
      }
      .userName {
        line-height: 30px;
        margin-left: 10px;
        width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .del {
        color: #f56c6c;
        margin-left: 60px;
        //margin-top: -3px;
        border-radius: 2px;
        height: 20px;
        line-height: 20px;
        padding: 2px 5px;
        &:hover {
          background: #f56c6c;
          color: beige;
        }
      }
      .num {
        position: absolute;
        color: #ffffff;
        background-color: #f56c6c;
       //height: 20px;
        //width: 20px;
        padding: 0 5px;
        border-radius: 8px;
        overflow: hidden;
        left: 190px;
      }
    }
  }
  .talk {
    height: 600px;
    overflow-y: auto;
  }
  .sendText {
    height: 100px;
    border-top: 1px solid #dcdfe6;
    padding: 0px 10px 0 10px;
    line-height: 100px;
    display: flex;
    align-items: center;
  }
}
.my-active {
  background-color: #dcdfe6;
}
</style>